<template>
	<view class="main">
		<view class="ul mt20">
			<template v-for="(item, index) in formData">
				<view v-if="item.show" class="li typeface flex_align" :key="index">
					<text class="li_label">{{ item.label }}</text>
					<input class="li_value flex1" v-model="item.value" :type="item.showPassword ? 'text' : 'password'"
						:placeholder="item.placeholder" :maxlength="item.maxlength">
					<view class="li_icon" @click="togglePasswordVisibility(item)">
						<image class="icon" v-if="!item.showPassword" src="/static/img/my/close_eye.png" mode="scaleToFill" />
						<image class="icon" v-else src="/static/img/my/open_eye.png" mode="scaleToFill" />
					</view>
				</view>
			</template>
		</view>
		<view class="btn flex_center_align" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>
<script type="text/javascript" src="plus-confusion://../pages/my/settings/editPassword"></script>


<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #fafafa;
	overflow: hidden;

	.ul {
		padding: 0 0 0 30rpx;
		background-color: #fff;

		.li {
			position: relative;
			height: 112rpx;

			.li_label {
				width: 170rpx;
				font-size: 32rpx;
				color: #222229;
			}

			.li_value {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				padding: 10rpx 30rpx 10rpx 0;
				border: none;
			}

			.li_icon {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 50%;
				right: 30px;
				transform: translateY(-50%);

				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.btn {
		margin: 70rpx auto 0;
		width: 630rpx;
		height: 90rpx;
		background: #1C87F3;
		border-radius: 45rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}

}
</style>


